<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app"></div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>


    <script type="text/babel">
        //01 类组件生命周期
        //阶段：挂载 更新 卸载
        //作用: 生命周期的钩子函数  ，在不同阶段 做不同的事情 

        //02 挂载阶段 ： 创建组件-JSX(vDOM) - 真实DOM - 容器
        class App extends React.Component{
            //01 默认属性初始化 : defaultProps / propTypes  / this.state/  this.go 
            static defaultProps ={
                age:1
            }

            //02 constructor
            constructor(props){
                console.log('------------------constructor');
                // 2.1 props
                // console.log(props); //形参
                // console.log(this.props); // 'this' is not allowed before super()
                
                // props 初始化绑定this
                super(props)  // this.props = props

                // console.log(this.props);

                //2.2 初始化状态 ，必须是一个对象
                this.state={m:10}

                //2.3 this绑定
                this.go = this.go.bind(this)
            }

            state = {m:20}

            go(){
                // console.log(this); //没绑定 undefined
                console.log(this); //App 组件实例
            }

            //03 :第一次组件渲染之前 执行一次；副作用操作不要放在里面
            componentWillMount(){
                console.log('------------------componentWillMount');

                //3.1  state 和 props ：相关逻辑处理
                // console.log('componentWillMount state',this.state);
                // console.log('componentWillMount props',this.props);

                //3.2  17版本 被 UNSAFE_componentWillMount 替换

                //3.3 能修改数据，不会触发render
                this.setState({m:11})
                this.setState({m:12})
            }
            
            // 4 render 渲染 
            // 时机 ：第一次挂载 | 更新
            // all in js : vDOM / diff 
            // 必须实现的方法，纯函数 
            // 注意：不能直接setState() 造成死循环
            render(){
                console.log('------------------render')
                return (
                    <div>
                        <div>App ：{this.props.age}</div>
                        <div>m ：{this.state.m}</div>
                        <button onClick={this.go}>go</button>
                    </div>
                )
            }

            //5 第一渲染完毕 ：vDOm=>tDOM 
            componentDidMount(){
                console.log('------------------componentDidMount');
                //依赖于DOM 操作
                // ref dom
                // 定时器
                // 事件监听
                // 网络请求
                // 调用setState ： 自动render
                // this.setState({
                //     m:12
                // })
            }
        }

      
        ReactDOM.render(<App name={'zs'} sex={1}/>, document.getElementById('app'))
    </script>
</body>

</html>